// 引入公共的less
@import "common";


// div {
//     /* width: 320rem; */
//     width: 320/@rem;
//     height: 20rem;
//     background-color: red;
// }

.head {
    background-color: blue;
    &-home {
        color: white;
    }
    &-search {
        position: relative;
        input {

            border-radius: 15/@rem;
            padding-left: 70/@rem;
        }

        ul {
            width: 60/@rem;
            height: 25/@rem;
            line-height: 25/@rem;
            //    background-color: pink;
            position: absolute;
            left: 10/ @rem;
            ;
            top: 7.5/@rem;

            li {
                height: 25/@rem;

                &:nth-child(1) {
                    img {
                        height: 25/@rem;
                        width: 25/@rem;
                    }

                }

                &.line {
                    width: 2/@rem;
                    height: 21/@rem;
                    margin: 2/@rem 5/@rem 0 5/@rem ;
                    background-color: #ccc;
                }

                &:nth-child(3) {
                    .iconfont {
                        font-size: 18/@rem;
                    }
                }


            }
        }
    }

    &-login {

        a {
            color: white;
            letter-spacing: 2/@rem;
        }
    }
}



// 轮播区域
.view {
    width: 320/@rem;
    height: 190/@rem;
    overflow: hidden;
    .swiper-wrapper {
        .swiper-slide {
            a {
                img {
                    width: 320/@rem;
                    height: 190/@rem;
                }
            }

        }
    }

    .my-bullet {
        width: 16px;
        height: 16px;
        display: inline-block;
        border-radius: 50%;
        background: red;
        opacity: .7;
        margin-left: 10/@rem;
        &:first-child {
            margin-left: 0;
        }
    }
    .my-bullet-active {
        opacity: 1;
        background-color: orange!important ;
    }

}



// 导航区域
.nav {
    width: 320/ @rem;
    height: 200/@rem;
    position: relative;

    z-index: 99;

    &-box {
        width: 320/ @rem;
        height: 210/@rem;
        position: absolute;
        background-color: #fff;
        border-radius: 5/@rem 5/@rem 0 0;
        left: 0;
        top: -10/@rem;

        &-top {
            height: 80/@rem;

            a {
                img {
                    height: 80/@rem;
                    width: 320/ @rem;
                }
            }

        }

        &-bottom {
            height: 130/@rem;

            li {
                height: 65/@rem;
                width: 20%;
                text-align: center;
                float: left;
                padding: 5/@rem 0;

                a {
                    img {
                        width: 40/@rem;
                        height: 40/@rem
                    }

                    p {}
                }

            }

        }
    }
}

// 秒杀区域
.kill {
    width: 310/@rem;
    height: 155/@rem;
    margin: 5/@rem auto;
    margin-bottom: 0;
    background-color: #fff;
    font-size: 14/@rem;

    &-top {
        height: 30/@rem;
        line-height: 30/@rem;
        // background-color: pink;
        overflow: hidden;
        padding: 0 3/@rem;

        &-img {
            width: 20/@rem;
            height: 25/@rem;
            margin: 2.5/@rem 0;
            background: url(../img/seckill-icon.png) no-repeat;
            background-size: 20/@rem 25/@rem;
        }

        &-title {
            margin-left: 8/@rem;
            color: red;
        }

        &-time {
            li {
                float: left;
                border: 1/@rem solid #ccc;
                height: 20/@rem;
                line-height: 20/@rem;
                margin: 5/@rem 0;
                margin-left: 4/@rem;
                padding: 0 2/@rem;

                &:nth-child(3n) {
                    margin-left: 0;
                    margin-right: -4/@rem;
                    border: 0;
                }
            }
        }

    }

    &-bottom {
        height: 125/@rem;

        .swiper-slide {
           
           
            text-align: center;

            div {
                width: 100%;
                position: relative;

                &::before {
                    content: "";
                    display: block;
                    height: 60/@rem;
                    width: 2/@rem;
                    background-color: #ccc;
                    position: absolute;
                    right: 4/@rem;
                    top: 6/@rem;
                }

                a {
                    img {
                        width: 64/@rem;
                        height: 72/@rem;
                    }
                }

            }

            p {
                &.price-current {
                    margin-top: 8/@rem;
                    height: 25/@rem;
                    font-size: 18/@rem;
                    color: red;
                }

                &.price-old {
                    color: #ccc;
                    text-decoration: line-through;
                    font-size: 16/@rem;
                }
            }
        }
    }
}

// 楼层区域 

.floor {
    width: 310/@rem;
    height: 240/@rem;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 5/@rem;

    &-top {
        height: 35/@rem;
        line-height: 35/@rem;

        h3 {
            font-size: 18/@rem;
            margin-left: 30/@rem;
            font-weight: normal;
            position: relative;

            &::before {
                content: "";
                display: block;
                width: 3/@rem;
                height: 16/@rem;
                background-color: red;
                position: absolute;
                top: 9.5/@rem;
                left: -8/@rem;
            }
        }

    }

    &-bottom {
        height: 205/@rem;
        overflow: hidden;

        .box {
            width: 305/@rem;
            height: 195 /@rem;
            margin: 5/@rem auto;

            .h100 {
                width: 50%;
                height: 100%;
            }

            .h50 {
                width: 100%;
                height: 50%;
            }

            // 右边框
            .rb {
                border-right: 1/@rem solid #ccc;
            }

            // 下边框
            .bb {
                border-bottom: 1/@rem solid #ccc;
            }

            // 左边框
            .lb {
                border-left: 1/@rem solid #ccc;
            }

            // 上边框
            .tb {
                border-top: 1/@rem solid #ccc;
            }

            a {
                display: block;
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }

            }

        }

    }
}